<template>
  <el-form label-position='top' ref="formEl" label-width="240px" style="padding-top: 0px;">

    <template v-for="formGroup, formGroupIndex in formDataList">


      <div v-if="formGroup.form.group != ''" style="
                font-size: 16px;
                position: sticky;
                top: 0px;
                z-index: 2;
                height: 30px;
                line-height: 30px;
                border-bottom: 1px dashed #dcdfe6;
                font-weight: bold;
                padding: 10px 10px 10px 20px;
                margin-bottom: 20px;
                background-color: #fff;
                display: flex;
                align-items: center;
              ">
        <i style="
                width: 5px;
                height: 16px;
                line-height: 50px;
                margin-right: 8px;
                background-color: #2EA7E0;
              ">
        </i>
        <div class="title">{{ formGroup.form.group }}</div>
      </div>

      <!--<div class="header-spiler-text"><i class="header-spiler-icon back_primary"></i> <div class="title">基础信息</div> <div class="note"></div></div>-->

      <el-row v-for="(field, fieldIndex) in formGroup.form.fields" v-if="field.vif == '' || formGroup.value[field.vif]"
        :key="formGroupIndex + '_' + fieldIndex">

        <el-col :style="getColStyle(field)">


          <el-form-item
            :class="(field.type == 'boolean' && field.vif != '') ? 'child-bool-form-item' : 'auto-config-form-css'">

            <template slot="label">
              {{ field.type !== 'boolean' ? field.name : '' }}
              <el-popover v-if="field.type === 'combined' && field.desc && field.desc.length > 0" placement="top"
                width="240" trigger="hover">
                {{ field.desc }}
                <!-- <i slot="reference" class="el-icon-question" style="cursor: pointer;"></i> -->
                <el-button slot="reference" type="text" class="el-icon-question"></el-button>

              </el-popover>
            </template>

            <ex-select-auto v-if="field.type === 'select'" v-model="formGroup.value[field.code]" :data="field.options"
              optionKey="value" optionLabel="label" optionValue="value" placeholder="请选择工作模式" :multiple="field.multiple"
              style="width: 100%;">
            </ex-select-auto>

            <el-input v-if="field.type === 'text'" v-model="formGroup.value[field.code]" placeholder="请输入内容"
              style="width: 100%;">
            </el-input>

            <el-input v-if="field.type === 'textarea'" v-model="formGroup.value[field.code]" type="textarea"
              placeholder="请输入内容" style="width: 100%;">
            </el-input>
            <template v-if="field.type === 'number'">

              <el-slider v-if="field.slider" v-model="formGroup.value[field.code]" :min="field.min" :max="field.max"
                :step="1" style="width: 100%;" show-stops>
              </el-slider>
              <el-input-number v-else v-model="formGroup.value[field.code]" placeholder="请输入内容" :min="field.min"
                :max="field.max" :step="1" :precision="field.precision" style="width: 100%;">
              </el-input-number>

            </template>


            <el-switch v-if="field.type === 'boolean'" v-model="formGroup.value[field.code]" :active-text="field.name">
            </el-switch>

            <!-- <span v-if="field.type === 'boolean'" style="color: #606266; margin-left: 10px; margin-top: 8px; " >{{field.name}}</span> -->
            <template v-if="field.desc && field.type !== 'combined'">
              <span v-if="field.type === 'boolean'">
                <!--                    <br/>-->
                <!--                    <span style="color: #999; padding-left: 50px;"><i class="el-icon-info" ></i> {{field.desc}}  </span>-->
                <el-popover placement="top" width="240" trigger="hover">
                  {{ field.desc }}
                  <!-- <i slot="reference" class="el-icon-question" style="cursor: pointer;"></i> -->
                  <el-button slot="reference" type="text" class="el-icon-question"></el-button>

                </el-popover>

              </span>
              <font v-else style="color: #999; margin-left: 10px;">
                <i class="el-icon-info"></i> {{ field.desc }}
              </font>
            </template>

            <!-- 组合表单 -->

            <!-- ############## 组合表单 start  ################## -->
            <template v-if="field.type === 'combined'">

              <!-- list 类型， 根据配置值 的数量渲染表单-->
              <template v-if="field.multiple">
                <div v-for="(cfv, cfvRowIndex) in formGroup.value[field.code]" class="sys-config-combined-div"
                  :key="formGroupIndex + '_' + fieldIndex + '_' + cfvRowIndex">

                  <template v-for="(cf, cfIndex) in JSON.parse(field.combinedFields)">

                    <label class="combined-field-label">{{ cf.name }}</label>

                    <el-input v-if="cf.type === 'text'" v-model="cfv[cf.code]" :readonly="cf.readonly"
                      style="flex: 1; min-width: 160px; max-width: 200px; ">
                      <!-- <template slot="prepend">{{cf.name}}</template> -->
                    </el-input>

                    <ex-select-auto v-if="cf.type === 'select'" v-model="cfv[cf.code]" :data="cf.options"
                      optionKey="value" optionLabel="label" optionValue="value" placeholder="请选择工作模式"
                      :multiple="cf.multiple" style="flex: 1; min-width: 160px; max-width: 200px; ">
                    </ex-select-auto>

                    <el-input-number v-if="cf.type === 'number'" v-model="cfv[cf.code]" placeholder="请输入内容" :min="cf.min"
                      :max="cf.max" :step="1" style="flex: 1; min-width: 160px; max-width: 200px; ">
                    </el-input-number>

                  </template>

                  <div style="width: 80px; text-align: center;">
                    <el-button v-if="cfvRowIndex == 0" icon="el-icon-plus"
                      @click="formGroup.value[field.code].push({})">添加</el-button>
                    <el-button v-else icon="el-icon-close" type="text"
                      @click="formGroup.value[field.code].splice(cfvRowIndex, 1)">删除</el-button>
                  </div>

                </div>

              </template>

              <!-- 单个对象类型  -->
              <div v-else class="sys-config-combined-div">
                <template v-for="(cf, cfIndex) in JSON.parse(field.combinedFields)">

                  <label class="combined-field-label">{{ cf.name }}</label>

                  <el-input v-if="cf.type === 'text'" v-model="formGroup.value[field.code][cf.code]"
                    :readonly="cf.readonly" style="flex: 1; min-width: 160px; max-width: 200px; ">
                  </el-input>

                  <ex-select-auto v-if="cf.type === 'select'" v-model="formGroup.value[field.code][cf.code]"
                    :data="cf.options" optionKey="value" optionLabel="label" optionValue="value" placeholder="请选择工作模式"
                    :multiple="cf.multiple" style="flex: 1; min-width: 160px; max-width: 200px; ">
                  </ex-select-auto>

                  <el-input-number v-if="cf.type === 'number'" v-model="formGroup.value[field.code][cf.code]"
                    placeholder="请输入内容" :min="cf.min" :max="cf.max" :step="1"
                    style="flex: 1; min-width: 160px; max-width: 200px; ">
                  </el-input-number>

                </template>
              </div>
            </template>
            <!-- ############## 组合表单 end  ################## -->



          </el-form-item>

        </el-col>
      </el-row>

    </template>

  </el-form>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      saveButtonDisabled: false,

      formDataList: [],

      split_w: '_____',

    };
  },

  watch: {
    'formGroup.value'(val, old) {
      // console.log(val)
    }
  },

  props: {
    configBean: {
      type: String,
      default: ''
    },
    queryUrl: {
      type: String,
      default: ''
    },
    submitUrl: {
      type: String,
      default: ''
    },
  },

  created() {

    let _this = this

    if (_this.configBean == '') {
      alert('configBean is null')
    }
    if (_this.queryUrl == '') {
      alert('queryUrl is null')
    }
    if (_this.submitUrl == '') {
      alert('submitUrl is null')
    }

    // 加载 系统表单配置
    _this.$ajax({
      url: _this.queryUrl,
      data: {
        'configClassList': _this.configBean
      },
      success: function (res) {

        if (res && res.data && res.data.rows) {
          _this.formDataList = res.data.rows
        }

      }
    });


  },
  mounted() {
    var _this = this;

  },

  destroyed() { },

  methods: {

    getColStyle(field) {
      return {
        'min-width': field.type === 'combined' ? '800px' : '300px',
        'max-width': field.type === 'combined' ? '100%' : '300px',
        'padding-left': field.vif == '' ? '20px' : '40px'
      }
    },

    submitConfig(callback) {
      return new Promise((resolve, reject) => {
        let submitValue = {}
        for (let i = 0; i < this.formDataList.length; i++) {
          let formGroup = this.formDataList[i]
          submitValue['autoconfig___' + formGroup.form.className] = JSON.stringify(formGroup.value)
        }
        this.$ajax({
          url: this.submitUrl,
          method: 'post',
          data: submitValue,
          success:  (responseData)=> {

            if (callback) {
              callback()
            }
            resolve()
          },
          failure:()=>{
            reject()
          },
          afterAjax() {
          }
        });
      })



    }

  }
}

</script>
<style>
.sys-config-combined-div {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
  padding-left: 20px;
  align-items: flex-start;
  align-content: flex-start;
}

.sys-config-combined-div .el-select,
.sys-config-combined-div .el-input {
  max-width: 270px;
}

.combined-field-label {
  padding: 0px 10px 0px 18px;
  color: #606266;
}

.sys-config-combined-div .el-input {
  margin-right: 6px;
}

.sys-config-combined-div .el-input:last-child {
  margin-right: 0;
}

.sys-config-combined-div .el-input-group__prepend {
  padding: 0 10px;
}

.el-switch__label span {
  color: #606266;
}

.auto-config-form-css .el-form-item__label {
  padding-bottom: 6px;
  line-height: 22px;
  color: #000;
}

.child-bool-form-item .el-form-item__label {
  line-height: 0px;
  height: 0px;
  display: none;
}

.child-bool-form-item .el-form-item::before,
.child-bool-form-item .el-form-item::after {
  display: none;
}
</style>
